<template>
	<div class="app-anchor">
		<div class="app-anchor__line"></div>
		<div
			:class="['app-anchor__points', item.active ? 'active' : 'inactive']"
			v-for="(item, index) in anchorData"
			:key="item.codeName"
			@click.stop="handleClick(item, index)"
		>
			<span v-if="item.active" class="points-dot"></span>
			{{ item.caption }}
		</div>
	</div>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { anchorProps } from './anchor';
const props = defineProps(anchorProps);

let container: any = ref(null);

onBeforeMount(() => {
	props.anchorData.forEach((item: IParam) => {
		item.active = false;
	});
});

onMounted(() => {
	setTimeout(() => {
		getScrollContainer();
		setScrollHeight();
		handleScroll();
		initActiveState();
	}, 0);
});

onUnmounted(() => {
	if (container.value) {
		container.value.removeEventListener('scroll', scrollEvent);
	}
});

/**
 * 获取滚动区域
 *
 * @memberof AppAnchor
 */
const getScrollContainer = () => {
	if (props.controlID) {
		container.value = document.querySelector(
			`#${props.controlID} .app-control-form__content`
		);
	}
};

/**
 * 滚动事件
 *
 * @memberof AppAnchor
 */
const scrollEvent = (e: any) => {
	let scrollTop = e.target.scrollTop;
	props.anchorData.forEach((item: IParam) => {
		item.active = false;
	});
	let i = -1;
	while (++i < props.anchorData.length) {
		let currentEle = props.anchorData[i];
		let nextEle = props.anchorData[i + 1];
		if (
			scrollTop >= currentEle.scrollTop &&
			scrollTop < ((nextEle && nextEle.scrollTop) || Infinity)
		) {
			props.anchorData[i].active = true;
			break;
		}
	}
};

/**
 * 滚动区域滚动
 *
 * @memberof AppAnchor
 */
const handleScroll = () => {
	if (container.value) {
		container.value.addEventListener('scroll', scrollEvent);
	}
};

/**
 * 获取锚点到滚动条盒子顶部的距离
 *
 * @memberof AppAnchor
 */
const setScrollHeight = () => {
	if (container.value) {
		// 容器实际高度
		const actualHeight: number = container.value.scrollHeight;
		// 容器可视区域高度
		const visualHeight: number = container.value.offsetHeight;
		// 滚动条高度
		const scrollHeight = actualHeight - visualHeight;
		props.anchorData.forEach((item: any, index: number) => {
			let dom: any = document.querySelector(
				`.app-control-form .app-control-form__content .anchor__${item.codeName}`
			);
			if (dom) {
				// 获取锚点元素与滚动盒子元素相对于视口的距离
				const domTop: number = dom.getBoundingClientRect().top;
				const domHeight: number = dom.scrollHeight;
				const containerTop: number =
					container.value.getBoundingClientRect().top;
				const containerPaddingTop = getComputedStyle(
					container.value
				).getPropertyValue('padding-top');
				let paddingTop = 0;
				if (containerPaddingTop) {
					paddingTop =
						parseInt(
							containerPaddingTop.slice(0, containerPaddingTop.length - 2)
						) || 0;
				}
				// 获取需要滚动的距离
				let total = Math.trunc(domTop - containerTop - paddingTop);
				if (total > scrollHeight) {
					if (total - domHeight > scrollHeight) {
						total = scrollHeight;
					} else {
						total = total - domHeight;
					}
				}
				item.scrollTop = total;
			}
		});
	}
};

/**
 * 设置锚点激活状态
 *
 * @memberof AppAnchor
 */
const initActiveState = () => {
	if (props.anchorData.length > 0) {
		handleClick(props.anchorData[0], 0);
	}
};

/**
 * 处理点击事件
 */
const handleClick = (item: any, index: any) => {
	// 设置滚动
	if (container.value) {
		props.anchorData.forEach((_item: IParam) => {
			_item.active = false;
		});
		item.active = true;
		container.value.scrollTop = item.scrollTop;
	}
};
</script>
